<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery支持多图片上传预览代码 - ishwy.me</title>
<style type="text/css">
.demo{width:760px; margin:40px auto 0 auto; min-height:150px;}
.preview{width:200px;border:solid 1px #dedede; margin:10px;padding:10px;}
.demo p{line-height:26px}
.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
<script type="text/javascript">
$(function(){
	$('#photoimg').die('click').live('change', function(){
		var status = $("#up_status");
		var btn = $("#up_btn");
		$("#imageform").ajaxForm({
			target: '#preview', 
			beforeSubmit:function(){
				status.show();
				btn.hide();
			}, 
			success:function(){
				status.hide();
				btn.show();
			}, 
			error:function(){
				status.hide();
				btn.show();
		} }).submit();
	});
});
</script>
</head>
<body>
<div class="demo">
	<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
		<div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>
		<div id="up_btn" class="btn">
			<span>添加图片</span>
			<input id="photoimg" type="file" name="photoimg">
		</div>
	</form>
	<p>最大100KB，支持jpg，gif，png格式。</p>
	<div id="preview"></div>
</div>

</body>
</html>
